﻿@using Viettel.VOFFICE.Resources
@using Viettel.VOFFICE.Web.Models
<link href="@Url.Content("~/Scripts/treeview/jquery.treeview.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/treeview/jquery.treeview.js")" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        /* 
        Giá trị khởi tạo 
        */
        var $userInDept = $('#user-in-dept');
        var $userInSelected = $('#user-in-selected');

        var liUser = ['<li>',
            '<input type="checkbox" class="PreviewUser" id="#userId#"/><span>#username#</span>',
            '</li>'].join(' ');
        var liUserSelected = ['<li>',
            '<input type="checkbox" class="UserSelected" id="#userId#" checked="checked"/><span>#username#</span>',
            '</li>'].join(' ');
        var focusDeptId = $('#firstDeptId').val();
        window.SelectedUsers = [];

        /* 
            
        */
        $('#choose-selected-use').bind('click', function (event) {
            $('body').trigger('closeSDWU');
        });

        /* 
        Click vào nút trên cây thì hiển thị danh sách user tương ứng 
        */
        $('.show-dept-user').live("click", function (event) {
            var deptId = focusDeptId;
            var $target = $(event.currentTarget);
            $('.show-dept-user').css('background-color', 'white');
            $target.css('background-color', '#76D0F4');

            focusDeptId = null;
            if (!deptId) {
                deptId = $target.attr('data-id');
                window.SelectedDeptId = deptId;
                window.SelectedDeptName = $target.find('span').first().text();
            }
            if (!!deptId) {

                SaveIndicator.indicate($.get('/users/get_users_by_dept', { deptId: deptId }, function (data) {
                    if (!!data && data.Status == true) {

                        if (!!data.Result && data.Result.length > 0) {
                            $userInDept.html('');
                            _.each(data.Result, function (item) {
                                $userInDept.append(
                                    liUser.replace("#userId#", item.UserId)
                                        .replace("#username#", item.FullName)
                                );
                            });
                        } else {
                            $userInDept.html(jsResources.lang.DeptTreeDialogWithUsserNoUser);
                        }
                    }
                }));
            }
        });

        /*
        Chọn người dùng
        */
        $('.PreviewUser').live('change', function (event) {
            var $target = $(event.currentTarget);
            var id = $target.attr('id');
            if ($target.is(':checked') == true) {
                if (window.SelectedUsers.length == 0) {
                    window.SelectedUsers.push({
                        'UserId': id,
                        'UserName': $target.parent().find('span').first().text()
                    });
                }
                else {
                    var flag = true;
                    for (var i = 0; i < window.SelectedUsers.length; i++) {
                        if (window.SelectedUsers[i].UserId == id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        window.SelectedUsers.push({
                            'UserId': $target.attr('id'),
                            'UserName': $target.parent().find('span').first().text()
                        });
                    }
                }
            } else {
                if (window.SelectedUsers.length > 0) {
                    for (var j = 0; j < window.SelectedUsers.length; j++) {
                        if (window.SelectedUsers[j].UserId == id) {
                            window.SelectedUsers.splice(j, 1);
                        }
                    }
                }
            }
            renderSelectedUser();
        });

        /*
        Bỏ người dùng 
        */
        $('.UserSelected').live('change', function (event) {
            var $target = $(event.currentTarget);
            var id = $target.attr('id');
            if ($target.is(':checked') == false) {
                if (window.SelectedUsers.length > 0) {
                    for (var i = 0; i < window.SelectedUsers.length; i++) {
                        if (window.SelectedUsers[i].UserId == id) {
                            window.SelectedUsers.splice(i, 1);
                        }
                    }
                }
                $target.parent().fadeOut().remove();
                $('#' + id).removeAttr('checked');
            }
        });

        /*
        Khi người dùng được chọn thì đưa họ sang ô bên phải
        */
        function renderSelectedUser() {
            $userInSelected.html('');
            if (window.SelectedUsers.length > 0) {
                _.each(window.SelectedUsers, function (item) {
                    $userInSelected.append(liUserSelected.replace("#userId#", item.UserId).replace("#username#", item.UserName));
                });
            }
        }

        /* 
        Trigger để lấy những user đã chọn
        Trả về json object [{UserId:value, UserName:value},{...}]
        */
        $('#choose-selected-use').button();

        /* 
        Tạo cây, button và mở các nút đầu của cây
        */
        var $deptTree = $('#dept-tree');
        $deptTree.treeview({
            collapsed: true
        });
        $('.hitarea').first().trigger('click');

        /* 
        Hiển thị người dùng thuộc phòng ban đầu tiên hoặc phòng ban đã chọn
        */
        $('.show-dept-user').first().trigger('click');
    });

</script>
<style type="text/css">
    #dept-tree
    {
        width: 40%;
        float: left;
    }
    #user-in-dept
    {
        list-style: none;
        float: left;
        width: 29%;
        padding-left: 1%;
    }
    #user-in-selected
    {
        list-style: none;
        float: left;
        width: 29%;
        padding-left: 1%;
    }
    #sub-title {
        width: 100%;
        font-weight: bold;
        padding-top: 10px;
        padding-bottom: 10px;
        float: left;
    }
    #sub-title .width40 {
        width: 40%;
        float: left;
        text-align: center;
    }
    #sub-title .width30 {
        width: 30%;
        float: left;
        text-align: center;
    }
</style>
<input type="hidden" value="@Html.Raw(ViewBag.FocusDeptId == null ? "" : ViewBag.FocusDeptId.ToString())" id="firstDeptId"/>
<center>
    <input type="button" id="choose-selected-use" value="@Resources.DeptTreeButtonText"/>
</center>
<div id="sub-title">
    <div class="width40">
        @Resources.DeptTreeWithUserDept
    </div>
    <div class="width30">
        @Resources.DeptTreeWithUserDeptUser
    </div>
    <div class="width30">
        @Resources.DeptTreeWithUserSelected
    </div>
</div>
<div class="clear">
</div>
<ul id="dept-tree">
    @{
        if (ViewBag.DeptTree != null)
        {
            var list = ViewBag.DeptTree as List<DepartmentModel>;
            if (list != null && list.Any())
            {
                var print = "";
                var openUl = 0;
                var openLi = 0;
                for (var i = 0; i < list.Count(); i++)
                {
                    var item = list[i];
                    if (i == 0 && (item.ParentId == 0 || item.ParentId == null) && item.Node == 0)
                    {
                        print = "<li> <a class = 'show-dept-user' data-id = '" + item.Id + "' ><span title='" + item.Description + "'>" + @item.Name + "</span></a>";
                        openLi++;
        @Html.Raw(print);
                        continue;
                    }
                    if (i > 0 && item.Node == list[i - 1].Node)
                    {
                        print = "</li><li> <a class = 'show-dept-user' data-id = '" + item.Id + "' ><span title='" + item.Description + "'>" + @item.Name + "</span></a>";
        @Html.Raw(print);
                        continue;
                    }
                    if (i > 0 && item.Node > list[i - 1].Node)
                    {
                        print = "<ul><li> <a class = 'show-dept-user' data-id = '" + item.Id + "' ><span title='" + item.Description + "'>" + @item.Name + "</span></a>";
                        openLi++;
                        openUl++;
        @Html.Raw(print);
                        continue;
                    }
                    if (i > 0 && item.Node < list[i - 1].Node)
                    {
                        print = "</li>";
                        openLi--;
        @Html.Raw(print);
                        var k = list[i - 1].Node - item.Node;
                        while (openUl > 0 && k > 0)
                        {
                            print = "</ul>";
                            openUl--;
        @Html.Raw(print);
                        if (openLi > 0)
                        {
                            print = "</li>";
                            openLi--;
        @Html.Raw(print);
                        }
                        k--;
                        }
                        print = "<li> <a class = 'show-dept-user' data-id = '" + item.Id + "' ><span title='" + item.Description + "'>" + @item.Name + "</span></a>";
                        openLi++;
        @Html.Raw(print);
                        continue;
                    }
                }
                if (openLi > 0)
                {
                    print = "</li>";
                    openLi--;
        @Html.Raw(print);
                }
                while (openUl > 0)
                {
                    print = "</ul>";
                    openUl--;
        @Html.Raw(print);
                        if (openLi > 0)
                        {
                            print = "</li>";
                            openLi--;
        @Html.Raw(print);
                        }
                }
            }
        }    
    }
</ul>
<ul id="user-in-dept">
</ul>
<ul id="user-in-selected">
</ul>
